<template>
  <div class="control-center">
    <!-- 粒子动画背景 -->
    <div id="particles-js"></div>
    
    <!-- 数据概览卡片 -->
    <div class="overview-cards">
      <div class="card" v-for="(stat, index) in statistics" :key="index">
        <div class="card-content">
          <i :class="stat.icon"></i>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
          <div class="stat-trend" :class="stat.trend">
            <i :class="getTrendIcon(stat.trend)"></i>
            {{ stat.percentage }}%
          </div>
        </div>
        <div class="progress-bar">
          <div class="progress" :style="{ width: stat.percentage + '%' }"></div>
        </div>
      </div>
    </div>

    <!-- 实时监控面板 -->
    <div class="monitor-panel">
      <div class="panel-header">
        <h2>系统实时监控</h2>
        <div class="time-selector">
          <button 
            v-for="period in timePeriods" 
            :key="period"
            :class="['time-btn', { active: currentPeriod === period }]"
            @click="currentPeriod = period"
          >
            {{ period }}
          </button>
        </div>
      </div>
      
      <div class="monitor-grid">
        <div class="monitor-card cpu">
          <h3>CPU使用率</h3>
          <div class="gauge-chart">
            <div class="gauge-value">{{ cpuUsage }}%</div>
            <div class="gauge-circle">
              <svg viewBox="0 0 100 100">
                <!-- 背景圆环 -->
                <circle
                  cx="50"
                  cy="50"
                  r="45"
                  fill="none"
                  stroke="#eee"
                  stroke-width="8"
                />
                <!-- 进度圆环 -->
                <circle
                  cx="50"
                  cy="50"
                  r="45"
                  fill="none"
                  stroke="#1a237e"
                  stroke-width="8"
                  stroke-linecap="round"
                  :stroke-dasharray="circumference"
                  :stroke-dashoffset="dashOffset"
                  transform="rotate(-90 50 50)"
                />
              </svg>
            </div>
          </div>
        </div>

        <div class="monitor-card memory">
          <h3>内存占用</h3>
          <div class="memory-usage">
            <div class="usage-bar">
              <div class="used" :style="{ width: memoryUsage + '%' }"></div>
            </div>
            <div class="memory-stats">
              <span>已用: {{ usedMemory }}GB</span>
              <span>总计: {{ totalMemory }}GB</span>
            </div>
          </div>
        </div>

        <div class="monitor-card network">
          <h3>网络流量</h3>
          <div class="network-stats">
            <div class="stat-item">
              <i class="fas fa-arrow-up"></i>
              <span>上行: {{ uploadSpeed }}MB/s</span>
            </div>
            <div class="stat-item">
              <i class="fas fa-arrow-down"></i>
              <span>下行: {{ downloadSpeed }}MB/s</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动日志 -->
    <div class="activity-log">
      <h2>系统活动日志</h2>
      <div class="log-list">
        <div 
          v-for="(log, index) in activityLogs" 
          :key="index"
          class="log-item"
          :class="log.type"
        >
          <div class="log-icon">
            <i :class="getLogIcon(log.type)"></i>
          </div>
          <div class="log-content">
            <div class="log-message">{{ log.message }}</div>
            <div class="log-time">{{ log.time }}</div>
          </div>
          <div class="log-status" :class="log.status">
            {{ log.status }}
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作面板 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="action-grid">
        <button 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-btn"
          @click="handleQuickAction(action.id)"
        >
          <i :class="action.icon"></i>
          <span>{{ action.label }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ControlCenter',
  data() {
    return {
      // 统计数据
      statistics: [
        {
          icon: 'fas fa-server',
          value: '1,884',
          label: '平台接口',
          trend: 'up',
          percentage: 85
        },
        {
          icon: 'fas fa-users',
          value: '1,667',
          label: '开发者',
          trend: 'up',
          percentage: 92
        },
        {
          icon: 'fas fa-code',
          value: '5,522',
          label: '调用次数',
          trend: 'up',
          percentage: 78
        },
        {
          icon: 'fas fa-chart-line',
          value: '99.9%',
          label: '服务可用率',
          trend: 'stable',
          percentage: 99.9
        }
      ],

      // 时间周期选择
      timePeriods: ['24h', '7天', '30天', '全部'],
      currentPeriod: '24h',

      // 系统监控数据
      cpuUsage: 45,
      memoryUsage: 68,
      usedMemory: 10.9,
      totalMemory: 16,
      uploadSpeed: 2.5,
      downloadSpeed: 3.8,

      // 活动日志
      activityLogs: [
        {
          type: 'info',
          message: '新用户注册',
          time: '2分钟前',
          status: 'success'
        },
        {
          type: 'warning',
          message: 'API调用次数超过阈值',
          time: '5分钟前',
          status: 'warning'
        },
        {
          type: 'error',
          message: '服务器负载过高',
          time: '10分钟前',
          status: 'error'
        }
      ],

      // 快速操作
      quickActions: [
        {
          id: 'add-api',
          icon: 'fas fa-plus',
          label: '添加接口'
        },
        {
          id: 'system-status',
          icon: 'fas fa-server',
          label: '系统状态'
        },
        {
          id: 'user-manage',
          icon: 'fas fa-users-cog',
          label: '用户管理'
        },
        {
          id: 'settings',
          icon: 'fas fa-cog',
          label: '系统设置'
        }
      ]
    }
  },
  computed: {
    gaugeStyle() {
      return {
        transform: `rotate(${this.cpuUsage * 1.8}deg)`
      }
    },
    // 圆环周长
    circumference() {
      return 2 * Math.PI * 45;
    },
    // 计算进度条偏移量
    dashOffset() {
      return this.circumference * (1 - this.cpuUsage / 100);
    }
  },
  methods: {
    getTrendIcon(trend) {
      return {
        up: 'fas fa-arrow-up',
        down: 'fas fa-arrow-down',
        stable: 'fas fa-equals'
      }[trend]
    },
    getLogIcon(type) {
      return {
        info: 'fas fa-info-circle',
        warning: 'fas fa-exclamation-triangle',
        error: 'fas fa-times-circle'
      }[type]
    },
    handleQuickAction(actionId) {
      // 处理快速操作点击
      console.log('Quick action clicked:', actionId)
    }
  },
  mounted() {
    // 初始化粒子效果
    this.initParticles()
  }
}
</script>

<style scoped>
.control-center {
  padding: 24px;
  min-height: 100vh;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  position: relative;
}

/* 粒子背景 */
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 数据概览卡片 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.card i {
  font-size: 24px;
  color: #1a237e;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1a237e;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.stat-trend {
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.stat-trend.down {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.stat-trend.stable {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

.progress-bar {
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #1a237e, #3949ab);
  transition: width 0.3s ease;
}

/* 监控面板 */
.monitor-panel {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time-selector {
  display: flex;
  gap: 10px;
}

.time-btn {
  padding: 6px 12px;
  border: none;
  background: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.time-btn.active {
  background: #1a237e;
  color: white;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.monitor-card {
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
}

/* CPU使用率图表 */
.gauge-chart {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 20px auto;
}

.gauge-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #1a237e;
}

.gauge-circle {
  width: 100%;
  height: 100%;
}

.gauge-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.gauge-circle circle {
  transition: stroke-dashoffset 0.3s ease;
}

/* 内存使用图表 */
.memory-usage {
  margin-top: 20px;
}

.usage-bar {
  height: 20px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.used {
  height: 100%;
  background: linear-gradient(90deg, #1a237e, #3949ab);
  transition: width 0.3s ease;
}

.memory-stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

/* 网络流量 */
.network-stats {
  margin-top: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.stat-item i {
  color: #1a237e;
}

/* 活动日志 */
.activity-log {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.log-list {
  margin-top: 20px;
}

.log-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.log-item:hover {
  background: #f0f0f0;
}

.log-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.log-item.info .log-icon {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

.log-item.warning .log-icon {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.log-item.error .log-icon {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.log-content {
  flex: 1;
}

.log-message {
  font-weight: 500;
}

.log-time {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.log-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.log-status.success {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.log-status.warning {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.log-status.error {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

/* 快速操作 */
.quick-actions {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: none;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #1a237e;
  color: white;
  transform: translateY(-2px);
}

.action-btn i {
  font-size: 24px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .control-center {
    padding: 16px;
  }
  
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .monitor-grid {
    grid-template-columns: 1fr;
  }
  
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .control-center {
    background: #121212;
  }
  
  .card,
  .monitor-panel,
  .activity-log,
  .quick-actions {
    background: #1e1e1e;
    color: #fff;
  }
  
  .monitor-card {
    background: #2d2d2d;
  }
  
  .action-btn {
    background: #2d2d2d;
    color: #fff;
  }
  
  .log-item {
    background: #2d2d2d;
  }
  
  .stat-label,
  .log-time {
    color: #aaa;
  }
}
</style>
